<template>
  <div class="container">
    <div class="showCont" v-if="showCont && !showTimeOut">
      <!-- <div class="gzhTip">
                <div>关注公众号，接单不迷路～</div>
                <div class="gzBtn" @click="showGzMask = true">关注</div>
            </div> -->
      <div class="bannerCont">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in bannerArr" :key="index">
            <img src="/img/banner2.png" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div v-if="noticeArr.length > 0" class="noticeCont">
        <div class="noticeText">
          <van-notice-bar
            left-icon="volume-o"
            background="#fff"
            color="#86a9fb"
            :scrollable="false"
          >
            <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="5000"
              :touchable="false"
              :show-indicators="false"
            >
              <van-swipe-item :key="index" v-for="(item, index) in noticeArr">{{
                item
              }}</van-swipe-item>
            </van-swipe>
          </van-notice-bar>
        </div>
        <div class="noticeBtn" @click="toEndRecord">查看榜单</div>
      </div>
      <div class="orderHead">
        <div class="serchCont">
          <div class="serchInput">
            <input
              v-model="serchKey"
              @keydown="keyDownFn($event)"
              placeholder="请输入技术或岗位"
            />
            <div @click="serchFn" class="serchBtn iconfont icon-sousuo2"></div>
          </div>
        </div>
        <div class="orderTop">
          <div class="orderNav">
            <div
              :class="stepId == item.id ? 'navItem_active' : 'navItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in navArr"
            >
              {{ item.val }}
            </div>
          </div>
          <div class="headSort">
            <van-popover
              v-model:show="showPopover"
              placement="bottom-end"
              :actions="actions"
              @select="sortSelect"
            >
              <template #reference>
                <div class="citySort" v-if="stepId == 1">
                  <div>{{ sortName }}</div>
                  <div class="iconfont icon-paixu2"></div>
                </div>
              </template>
            </van-popover>
          </div>
          <div class="citySort" v-if="stepId == 2" @click="userCityShow = true">
            <div>{{ userCity ? userCity : "全国" }}</div>
            <div class="iconfont icon-paixu2"></div>
          </div>
        </div>
      </div>
      <div class="orderCont">
        <div class="orderMain" v-if="stepId == 1">
          <div
            @click="detaiFn(item)"
            :class="index == 0 ? 'orderItem noTop' : 'orderItem'"
            :key="index"
            v-for="(item, index) in orderArr"
          >
            <div class="itemHead">
              <div class="headName">
                <div class="orderNum">
                  {{ item.project_demand_number }} · {{ item.project_name }}
                </div>
              </div>
              <div class="headTime">{{ item.end_time }}</div>
            </div>
            <div class="orderForm">
              <div class="itemForm">
                <div class="formItem">
                  <div class="itemName">经验要求</div>
                  <div class="itemVal">{{ item.jdjy }}年以上</div>
                </div>
                <div class="formItem">
                  <div class="itemName">周期要求</div>
                  <div class="itemVal">{{ item.project_cycle }}个月完成</div>
                </div>
                <div class="formItem">
                  <div class="itemName">办公要求</div>
                  <div class="itemVal">{{ item.bgyq }}</div>
                </div>
                <div class="formItem">
                  <div class="itemName">接单对象</div>
                  <div class="itemVal">{{ item.jdqt }}</div>
                </div>
              </div>
              <div class="orderPricr">
                ¥{{ $converData.setMoney(item.project_budget) }}
              </div>
            </div>
            <div class="formItem">
              <div class="itemName">需求说明</div>
              <div class="itemVal">{{ item.project_describe }}</div>
            </div>
            <div class="bindCtrl">
              <div class="userImg">
                <img v-if="item.head_img != ''" :src="item.head_img + ossSrc" />
                <img v-if="item.head_img == ''" :src="'/img/head.jpg'" />
              </div>
              <div class="userName">{{ item.nick_name }}</div>
              <div class="bindBtn lookBtn" @click="toDetail(item)">
                查看详情/申请接单
              </div>
            </div>
          </div>
        </div>
        <div class="orderMain" v-if="stepId == 2">
          <div
            @click="detaiFn(item)"
            :class="index == 0 ? 'orderItem noTop' : 'orderItem'"
            :key="index"
            v-for="(item, index) in orderArr"
          >
            <div class="itemHead">
              <div class="headName">
                <div class="headName_">
                  <div class="orderNum">{{ item.position_name }}</div>
                </div>
                <div class="quckTag" v-if="item.position_type == 2">急聘</div>
              </div>
              <div class="headMoney">
                ¥{{ parseInt(item.price_start) }}-{{
                  parseInt(item.price_end)
                }}k/月
              </div>
            </div>
            <div class="compDes hasTop">
              <div class="tagItem">{{ item.experience }}</div>
              <div class="userNum_">·</div>
              <div class="tagItem">
                {{ item.education }}
              </div>
              <div class="userNum_">·</div>
              <div class="tagItem">{{ item.salary_month }}薪</div>
            </div>
            <div class="tagCont">
              <div
                class="tagItem"
                :key="index2"
                v-for="(item2, index2) in getwelfareArr(item.welfare_treatment)"
              >
                {{ item2 }}
              </div>
            </div>
            <div class="skillDes">
              {{ item.skill_requirements }}
            </div>
            <div class="formUnder" v-if="item.enterprise_apply">
              <div class="userInfo">
                <div class="userImg">
                  <img :src="item.enterprise_apply.enterprise_logo" />
                </div>
                <div class="suerInfoMain noFlex">
                  <div class="userNameBox">
                    <div class="userName">
                      {{ item.enterprise_apply.enterprise_name }}
                    </div>
                    <div class="relTag">已认证</div>
                  </div>
                  <div class="compDes">
                    <div class="tagItem">{{ item.position_city }}</div>
                    <div class="userNum_">·</div>
                    <div class="tagItem">
                      {{ item.enterprise_apply.enterprise_scale }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <run v-if="isChageNav"></run>
        <noData v-if="orderArr.length == 0 && !isChageNav"></noData>
      </div>
      <div class="maskEdit" v-if="hasBook == 1">
        <div class="maskLeft">
          <div class="maskName">完善简历-开始接单</div>
          <div class="maskDes">每日提供海量的外包项目</div>
        </div>
        <div class="maskEditBtn" @click="toBook">去完善</div>
      </div>
    </div>
    <van-popup v-model:show="showGzMask" round position="bottom">
      <div class="maskCont">
        <div class="userName">《码客直通车》</div>
        <div class="userErweima">
          <img src="/img/erweima.jpg" />
        </div>
        <div class="userTel">长按二维码关注公众号</div>
        <div class="maskBtn" @click="showGzMask = false">关闭弹窗</div>
      </div>
    </van-popup>
    <footcpm></footcpm>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="userCityShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择招聘岗位城市</div>
        <van-area
          :columns-num="2"
          @change="userCityChange"
          confirm-button-text=""
          cancel-button-text=""
          :area-list="areaList"
        />
        <div class="maskBtn" @click="userCitySureFn">确认选择</div>
      </div>
    </van-popup>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>

<script>
import footcpm from "@/components/footcpm.vue";
import noData from "@/components/public/noData.vue";
import { areaList } from "@vant/area-data";
import { user, My, getBidder } from "@/http/api";
import run from "@/components/public/run.vue";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import $ from "jquery";
export default {
  components: { footcpm, noData, load, getTimeOut, run },
  name: "home",
  data() {
    return {
      showCont: false,
      showTimeOut: false,
      showGzMask: false,
      userCityShow: false,
      showPopover: false,
      isChageNav: false,
      noticeArr: [],
      bannerArr: [
        {
          img: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
          url: "",
        },
        {
          img: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
          url: "",
        },
      ],
      serchKey: "",
      userCity: "",
      areaList: areaList,
      navArr: [
        { val: "外包项目", id: 1 },
        { val: "岗位招聘", id: 2 },
      ],
      stepId: 1,
      actions: [
        { id: 1, label: "推荐", text: "推荐排序", icon: "good-job-o" },
        { id: 2, label: "最新", text: "最新排序", icon: "medal-o" },
        { id: 3, label: "热度", text: "度热排序", icon: "chart-trending-o" },
      ],
      sortName: "推荐",
      sortId: 1,
      page: 1,
      per_page: 10,
      last_page: 0,
      getting: false,
      orderArr: [],
      hasBook: 2,
    };
  },
  props: {},
  setup() {},
  methods: {
    toEndRecord() {
      this.$router.push({ path: "/endRecord" });
    },
    getwelfareArr(str) {
      return str.split(",");
    },
    sortSelect(e) {
      this.sortName = e.label;
      this.sortId = e.id;
      this.serchFn();
    },
    keyDownFn(e) {
      if (e.keyCode == 13) {
        this.serchFn();
      } else if (e.keyCode == 8) {
        setTimeout(() => {
          if (!this.serchKey) {
            this.serchFn();
          }
        }, 10);
      }
    },
    setMoney(val) {
      let num = Number(val);
      if (num >= 10000) {
        return num / 10000 + "w";
      } else {
        return num;
      }
    },
    //选择城市
    userCityChange(selectedValues, selectedOptions) {
      if (selectedValues.selectedOptions.length > 0) {
        this.userCity = selectedValues.selectedOptions[1].text;
      }
    },
    userCitySureFn() {
      if (this.userCity == "") {
        this.userCity = "北京市";
      }
      this.userCityShow = false;
      this.serchFn();
    },
    serchFn() {
      this.page = 1;
      this.orderArr = [];
      this.getData();
    },
    navFn(item) {
      this.stepId = item.id;
      this.orderArr = [];
      this.page = 1;
      this.getData();
    },
    detaiFn(item) {
      if (this.stepId == 1) {
        this.$router.push({
          path: "/detail",
          query: { id: item.project_demand_id },
        });
      } else {
        this.$router.push({
          path: "/workDetail",
          query: { enterprise_position_id: item.enterprise_position_id },
        });
      }
    },
    toBook() {
      this.$router.replace({ path: "/book" });
    },

    getData() {
      let data = {
        page: this.page,
        per_page: this.per_page,
        type: this.stepId,
        order: this.sortId,
        search: this.serchKey,
        position_city: this.userCity,
      };
      this.isChageNav = true;
      user(data)
        .then((res) => {
          if (res.data.code == 1) {
            let arr = res.data.data.data;
            for (let i = 0; i < arr.length; i++) {
              this.orderArr.push(arr[i]);
            }
            setTimeout(() => {
              this.getting = false;
            }, 100);
            this.last_page = res.data.data.last_page;
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
          this.isChageNav = false;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    getUserInfo() {
      My().then((res) => {
        if (res.data.code == 1) {
          this.hasBook = res.data.data.is_cv;
        }
      });
    },
    getNotice() {
      getBidder().then((res) => {
        if (res.data.code == 1) {
          this.noticeArr = res.data.data;
        }
      });
    },
    nextfn() {
      if (this.$route.path == "/home") {
        let h =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        let wh =
          document.documentElement.clientHeight || document.body.clientHeight;
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let bottom = h - wh - top;
        if (bottom <= 50) {
          if (this.getting == false) {
            if (this.last_page > this.page) {
              this.getting = true;
              this.page++;
              this.getData();
            }
          }
        }
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.nextfn);
  },
  beforeRouteLeave(to, from, next) {
    if (from.path === "/home") {
      // 保存滚动位置
      let leaveTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      console.log(leaveTop);
      localStorage.setItem("leaveTop", leaveTop);
    }
    next();
  },
  beforeRouteEnter(to, from, next) {
    let leaveTop = localStorage.getItem("leaveTop");
    if (leaveTop) {
      $("html,body").animate({ scrollTop: leaveTop }, 0);
    } else {
      $("html,body").animate({ scrollTop: 0 }, 0);
    }
    next();
  },
  created() {
    this.getData();
    this.getUserInfo();
    this.getNotice();
    // this.showTimeOut = true;
    // this.showCont = true;
  },
};
</script>

<style scoped lang="less">
.container {
  min-height: 100vh;
  background-color: #e7eeff;
  .showCont {
    padding-bottom: 3rem;
    box-sizing: border-box;
  }
  .gzhTip {
    width: 100%;
    background-color: rgba(0, 0, 0, 1);
    font-size: 0.6rem;
    padding: 0.5rem 4%;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .gzBtn {
      padding: 0.35rem 1.5rem;
      border-radius: 2rem;
      background-color: #86a9fb;
    }
  }
  .bannerCont {
    width: 100%;
    font-size: 0;
    margin: 0 auto;
    img {
      width: 100%;
      // border-radius: 0.25rem;
    }
  }
  .noticeCont {
    display: flex;
    align-items: center;
    margin-top: -0.15rem;
    padding-top: 0.5rem;
    justify-content: space-between;
    background-color: #fff;
    padding-right: 4%;
    box-sizing: border-box;
    .noticeText {
      flex: 1;
      margin-right: 0.75rem;
    }
    .noticeBtn {
      font-size: 0.6rem;
      // color: #d5e1fc;
      color: #86a9fb;
    }
  }
  .orderHead {
    width: 100%;
    background-color: #fff;
    padding: 0.75rem 4%;
    box-sizing: border-box;
    position: relative;
    top: -0.15rem;
    .serchCont {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .serchInput {
        flex: 1;
        width: 0.5rem;
        background-color: #fff;
        // margin-right: 0.6rem;
        padding: 0 0.25rem 0 0.75rem;
        color: #777;
        border-radius: 1rem;
        box-sizing: border-box;
        height: 1.8rem;
        line-height: 1.8rem;
        // white-space: nowrap;
        // overflow: hidden;
        font-size: 0.65rem;
        // text-overflow: ellipsis;
        display: flex;
        align-items: center;
        border: 1px solid #86a9fb;
        input {
          border: none;
          outline: none;
          padding: 0;
          width: 100%;
          height: 1.8rem;
          line-height: 1.8rem;
          background: none;
          font-size: 0.6rem;
        }
        .serchBtn {
          width: 1.8rem;
          height: 1.8rem;
          font-size: 1rem;
          text-align: center;
          line-height: 1.8rem;
          border-radius: 50%;
          color: #86a9fb;
          // color: white;
        }
      }
    }
    .orderTop {
      width: 100%;
      // padding: 0 4%;
      box-sizing: border-box;
      margin-top: 0.5rem;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      font-size: 0.65rem;
      .orderNav {
        display: flex;
        position: relative;
        justify-content: space-between;
        .navItem,
        .navItem_active {
          text-align: center;
          padding: 0.25rem 0.75rem;
          box-sizing: border-box;
          color: #666;
          white-space: nowrap;
        }
        .navItem_active {
          color: #86a9fb;
          border-bottom: 1px solid #86a9fb;
        }
      }
      .headSort {
        display: flex;
        align-items: center;
      }
      .serchSort,
      .citySort {
        display: flex;
        align-items: center;
        font-size: 0.65rem;
        color: #666;
        .iconfont {
          font-size: 0.8rem;
          position: relative;
          top: 0.05rem;
        }
      }
    }
  }
  .orderCont {
    // background-color: #fff;
    border-radius: 0.25rem;
    box-sizing: border-box;
    width: 92%;
    margin: 0.75rem auto;
    .orderMain {
      width: 100%;
      margin-top: 0.75rem;
      .orderItem {
        background: #fff;
        padding: 0.75rem 4%;
        border-radius: 0.25rem;
        margin-bottom: 0.75rem;
        .itemHead {
          width: 100%;
          // padding: 0rem 0 0.75rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .headName {
            display: flex;
            flex: 1;
            width: 1rem;
            align-items: center;
            margin-right: 0.5rem;
            .headName_ {
              flex: 1;
              width: 1rem;
              max-width: 7rem;
            }
            .orderNum {
              width: 100%;
              font-weight: bold;
              font-size: 0.8rem;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            .orderTag,
            .quckTag {
              padding: 0.1rem 0.5rem;
              box-sizing: border-box;
              color: #ff5757;
              border: 1px solid #ff5757;
              border-radius: 0.1rem;
              font-size: 0.6rem;
              // margin-left: 0.5rem;
              transform: scale(0.85);
            }
          }
          .headTime {
            color: #999;
            font-size: 0.6rem;
          }
          .headMoney {
            color: #86a9fb;
            font-size: 0.8rem;
          }
        }
        .orderForm {
          margin-top: 0.75rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .itemForm {
            flex: 1;
            width: 1rem;
            margin-right: 0.75rem;
          }
          .orderPricr {
            font-size: 0.8rem;
            color: #86a9fb;
          }
        }
        .formItem {
          display: flex;
          line-height: 1rem;
          margin-bottom: 0.25rem;
          .itemName {
            margin-right: 0.75rem;
            width: 3rem;
          }
          .itemVal {
            color: #666;
            flex: 1;
            width: 1rem;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 超出几行省略 */
          }
        }
        .bindCtrl {
          margin-top: 0.5rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .userImg {
            height: 2rem;
            width: 2rem;
            border-radius: 50%;
            font-size: 0;
            overflow: hidden;
            border: 2px solid #86a9fb;
            img {
              width: 100%;
            }
          }
          .userName {
            flex: 1;
            width: 1rem;
            margin: 0 0.5rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .bindBtn {
            padding: 0 1rem;
            line-height: 1.9rem;
            border-radius: 2rem;
            background-color: #e7eeff;
            color: #86a9fb;
            border: 1px solid #86a9fb;
            font-size: 0.65rem;
          }
          .lookBtn {
            background-color: #86a9fb;
            color: #fff;
          }
        }
        .tagCont {
          display: flex;
          align-items: center;
          font-size: 0.6rem;
          flex-wrap: wrap;
          .tagItem {
            color: #666;
            margin-top: 0.5rem;
            padding: 0.15rem 0.5rem;
            background-color: #f1f5ff;
            margin-right: 0.5rem;
            border-radius: 0.1rem;
          }
          .userNum_ {
            margin: 0 0.25rem;
          }
        }
        .hasTop {
          margin-top: 0.25rem;
        }
        .compDes {
          display: flex;
          align-items: center;
          color: #666;
          font-size: 0.6rem;
          .userNum_ {
            margin: 0 0.25rem;
          }
        }
        .skillDes {
          width: 100%;
          font-size: 0.6rem;
          color: #999;
          margin-top: 0.5rem;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 超出几行省略 */
        }
        .formUnder {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.5rem;
          .userInfo {
            display: flex;
            align-items: center;
            .userImg {
              width: 2rem;
              height: 2rem;
              font-size: 0;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 0.75rem;
              img {
                width: 100%;
              }
            }
            .suerInfoMain {
              display: flex;
              align-items: center;
              .relTag {
                padding: 0.1rem 0.25rem;
                color: #5cc78e;
                font-size: 0.6rem;
                border: 1px solid #5cc78e;
                border-radius: 0.1rem;
                transform: scale(0.8);
              }
            }
            .noFlex {
              display: block;
              .userNameBox {
                display: flex;
                align-items: baseline;
              }
            }
            .userName {
              font-size: 0.65rem;
            }
            .userNum {
              display: flex;
              align-items: center;
              font-size: 0.6rem;
              color: #666;
            }
          }
          .subBtn {
            padding: 0.25rem 1rem;
            border: 1px solid #86a9fb;
            color: #86a9fb;
            font-size: 0.6rem;
            border-radius: 0.25rem;
          }
        }
      }
      .noTop {
        border-top: none;
      }
    }
  }
  .maskCont {
    width: 100%;
    padding: 1.25rem 4%;
    box-sizing: border-box;
    text-align: center;

    .userName {
      font-size: 0.9rem;
      font-weight: bold;
      text-align: center;
      margin: 0.5rem 0;
    }
    .userErweima {
      width: 100%;
      margin-bottom: 0.25rem;
      text-align: center;
      img {
        height: 8rem;
      }
    }
    .userTel {
      font-weight: bold;
    }
    .maskBtn {
      width: 100%;
      background-color: #86a9fb;
      color: #fff;
      text-align: center;
      padding: 0.75rem 0;
      margin-top: 1.25rem;
      border-radius: 1.5rem;
    }
  }
  .maskEdit {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    position: fixed;
    bottom: 3.5rem;
    left: 0;
    padding: 0.75rem 4%;
    box-sizing: border-box;
    border-radius: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .maskEditBtn {
      padding: 0.5rem 1rem;
      background-color: #86a9fb;
      color: #fff;
      font-size: 0.6rem;
      border-radius: 2rem;
    }
    .maskLeft {
      font-size: 0.8rem;
      .maskDes {
        margin-top: 0.25rem;
        font-size: 0.6rem;
        .goldText {
          color: #86a9fb;
        }
      }
    }
  }
}
</style>

<style>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.van-swipe-item {
  font-size: 0.6rem !important;
}
</style>
